<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <style>
        .upLeft,
        .bottomLeft {
            float: left;
            width: 150px;
        }
        
        .upLeft {
            height: 40px;
            overflow: hidden;
            background: #eee;
            color: gray;
        }
        
        .upRight,
        .bottomRight {
            width: calc(100% - 150px);
        }
        
        .upRight {
            overflow: hidden;
            height: 40px;
            background: #eee;
            color: gray;
        }
        
        .bottomRight {
            overflow: auto;
        }
        
        .bottomLeft {
            height: calc(100% - 40px);
            overflow: hidden;
        }
        
        .bottomRight {
            height: calc(100% - 40px);
            overflow: auto;
        }
        
        .lTable table {
            table-layout: fixed;
            width: 100px;
            border-collapse: collapse;
            text-align: center;
            border: 1px solid lightgray;
        }

        td {
            width: 150px;
            height: 40px;
            line-height: 40px;
            border: 1px solid lightgray;
        }
        
        .lTable {
            height: 400px;
            width: 600px;
            font-size: 14px;
            font-family: 'microsoft yahei';
        }
    </style>
</head>

<body>
    <script>
        var SlideTable = function (data, option) {
            this.data = data;
            this.option = option;
            this.height = 40;
            this.width = 150;
        }

        SlideTable.prototype.create = function (dom, top, left) {
            var option = this.option;
            var data = this.data;

            var lTable = document.createElement('div');
            lTable.className = 'lTable';

            var upLeft = document.createElement('div');
            upLeft.className = 'upLeft';
            var upRight = document.createElement('div');
            upRight.className = 'upRight';
            var bottomLeft = document.createElement('div');
            bottomLeft.className = 'bottomLeft';
            var bottomRight = document.createElement('div');
            bottomRight.className = 'bottomRight';

            lTable.appendChild(upLeft);
            lTable.appendChild(upRight);
            lTable.appendChild(bottomLeft);
            lTable.appendChild(bottomRight);

            this.createTable(upLeft, data, option, top, left, 1);
            this.createTable(upRight, data, option, top, left, 2);
            this.createTable(bottomLeft, data, option, top, left, 3);
            this.createTable(bottomRight, data, option, top, left, 4);

            this.resetSize(upLeft, upRight, bottomLeft, bottomRight, top, left);

            dom.appendChild(lTable);

            var bottomRight = dom.querySelector('.bottomRight');
            var upRight = dom.querySelector('.upRight>table');
            var bottomLeft = dom.querySelector('.bottomLeft>table');

            bottomRight.onscroll = function (ev) {
                var left = ev.target.scrollLeft;
                var top = ev.target.scrollTop;

                upRight.style.transform = 'translate(-' + (left) + 'px, 0)';
                bottomLeft.style.transform = 'translate(0, -' + (top) + 'px)';
            };

        };

        SlideTable.prototype.resetSize = function (upLeft, upRight, bottomLeft, bottomRight, top, left) {
            var topHeight = top * this.height;
            var leftWidth = left * this.width;

            upLeft.style.cssText = 'height: ' + topHeight +'px; width: ' + leftWidth + 'px;';
            upRight.style.cssText = 'height: ' + topHeight +'px; width: calc(100% - ' + leftWidth + 'px)';
            bottomLeft.style.cssText = 'height: calc(100% - ' + topHeight +'px); width: ' + leftWidth + 'px;';
            bottomRight.style.cssText = 'height: calc(100% - ' + topHeight +'px);width: calc(100% - ' + leftWidth + 'px)';
        };

        SlideTable.prototype.createTable = function (dom, data, option, top, left, isHead) {
            var table = document.createElement('table');
            table.border = 1;
            var len = data.length;
            var length = option.length;

            if (isHead == 4) {
                for (var i = top - 1; i < len; i++) {
                    var tr = document.createElement('tr');

                    for (var j = left; j < length; j++) {
                        this.createTr(tr, data, option, i, j);
                    }

                    table.appendChild(tr);
                }
            }
            else if (isHead == 3) {
                for (var i = top - 1; i < len; i++) {
                    var tr = document.createElement('tr');

                    for (var j = 0; j < left; j++) {
                        this.createTr(tr, data, option, i, j);
                    }

                    table.appendChild(tr);
                }                
            }
            else if (isHead == 2) {
                var headTr = document.createElement('tr');

                for (var k = left; k < length; k++) {
                    var theadTd = document.createElement('td');
                    theadTd.innerHTML = option[k].title;
                    headTr.appendChild(theadTd);
                }

                table.appendChild(headTr);

                for (var i = 0; i < top - 1; i++) {
                    var tr = document.createElement('tr');

                    for (var j = left; j < length; j++) {
                        this.createTr(tr, data, option, i, j);
                    }

                    table.appendChild(tr);
                }

            }
            else if (isHead == 1) {
                var headTr = document.createElement('tr');

                for (var k = 0; k < left; k++) {
                    var theadTd = document.createElement('td');
                    theadTd.innerHTML = option[k].title;
                    headTr.appendChild(theadTd);
                }

                table.appendChild(headTr);

                for (var i = 0; i < top - 1; i++) {
                    var tr = document.createElement('tr');

                    for (var j = 0; j < left; j++) {
                        this.createTr(tr, data, option, i, j);
                    }

                    table.appendChild(tr);
                }

            }

            dom.appendChild(table);
        };

        SlideTable.prototype.createTr = function(tr, data, option, i, j) {
            var td = document.createElement('td');
            var cellData = data[i][option[j].dataIndex];
            var rowData = data[i];

            if (option[j].renderer) {
                cellData = option[j].renderer(cellData, rowData);
            }

            td.innerHTML = cellData;

            tr.appendChild(td);
        };

        var data = [
            { "type": 0, "title": "v", "orders": 2, "numberOfPosts": 1, "id": 2037494360317952, "ctime": "2017-02-03 17:02:08", "utime": "2017-02-03 17:02:08" }, 
            { "type": 0, "title": "a", "orders": 2, "numberOfPosts": 0, "id": 2037500913442816, "ctime": "2017-02-03 17:08:48", "utime": "2017-02-03 17:08:48" }, 
            { "type": 0, "title": "c", "orders": 3, "numberOfPosts": 0, "id": 2037501139968000, "ctime": "2017-02-03 17:09:02", "utime": "2017-02-03 17:09:02" }, 
            { "type": 1, "title": "123", "orders": 2, "numberOfPosts": 0, "id": 2038440299864064, "ctime": "2017-02-04 09:04:24", "utime": "2017-02-04 09:04:24" },
             { "type": 0, "title": "v", "orders": 2, "numberOfPosts": 1, "id": 2037494360317952, "ctime": "2017-02-03 17:02:08", "utime": "2017-02-03 17:02:08" }, 
            { "type": 0, "title": "a", "orders": 2, "numberOfPosts": 0, "id": 2037500913442816, "ctime": "2017-02-03 17:08:48", "utime": "2017-02-03 17:08:48" }, 
            { "type": 0, "title": "c", "orders": 3, "numberOfPosts": 0, "id": 2037501139968000, "ctime": "2017-02-03 17:09:02", "utime": "2017-02-03 17:09:02" }, 
            { "type": 1, "title": "123", "orders": 2, "numberOfPosts": 0, "id": 2038440299864064, "ctime": "2017-02-04 09:04:24", "utime": "2017-02-04 09:04:24" },
             { "type": 0, "title": "v", "orders": 2, "numberOfPosts": 1, "id": 2037494360317952, "ctime": "2017-02-03 17:02:08", "utime": "2017-02-03 17:02:08" }, 
            { "type": 0, "title": "a", "orders": 2, "numberOfPosts": 0, "id": 2037500913442816, "ctime": "2017-02-03 17:08:48", "utime": "2017-02-03 17:08:48" }, 
            { "type": 0, "title": "c", "orders": 3, "numberOfPosts": 0, "id": 2037501139968000, "ctime": "2017-02-03 17:09:02", "utime": "2017-02-03 17:09:02" }, 
            { "type": 1, "title": "123", "orders": 2, "numberOfPosts": 0, "id": 2038440299864064, "ctime": "2017-02-04 09:04:24", "utime": "2017-02-04 09:04:24" },
             { "type": 0, "title": "v", "orders": 2, "numberOfPosts": 1, "id": 2037494360317952, "ctime": "2017-02-03 17:02:08", "utime": "2017-02-03 17:02:08" }, 
            { "type": 0, "title": "a", "orders": 2, "numberOfPosts": 0, "id": 2037500913442816, "ctime": "2017-02-03 17:08:48", "utime": "2017-02-03 17:08:48" }, 
            { "type": 0, "title": "c", "orders": 3, "numberOfPosts": 0, "id": 2037501139968000, "ctime": "2017-02-03 17:09:02", "utime": "2017-02-03 17:09:02" }, 
            { "type": 1, "title": "123", "orders": 2, "numberOfPosts": 0, "id": 2038440299864064, "ctime": "2017-02-04 09:04:24", "utime": "2017-02-04 09:04:24" }
        ];

        var option = [{
            title: '所属圈子',
            dataIndex: 'type',
            renderer: function (cellData, rowData) {
                if (cellData == 1) {
                    return '来访者圈子';
                }
                else if (cellData == 0) {
                    return '咨询师圈子';
                }
            }
        }, {
            title: '名称',
            dataIndex: 'title'
        }, {
            title: '排序号',
            dataIndex: 'orders'
        }, {
            title: '帖子数量',
            dataIndex: 'numberOfPosts'
        }, {
            title: '操作',
            dataIndex: 'id',
            renderer: function (cellData, rowData) {
                var result = '';
                result += '<div style="overflow:hidden;">';
                result += '<a class="btn btn-primary" href="###" onclick="editItem(\'' + cellData + '\');">编辑</a>\n';
                result += '</div>';
                return result;
            }
        }];

        var aa = new SlideTable(data, option);
        aa.create(document.body, 1, 1);
    </script>
</body>

</html>